import React, { useState, useEffect } from 'react';
import './kou.css';
import { removeBackground } from '@imgly/background-removal';
import { Spin, Button, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

function Matting({ imageUrl }) {
    const [file, setFile] = useState(null);
    const [preview, setPreview] = useState('');
    const [processedImage, setProcessedImage] = useState('');
    const [loading, setLoading] = useState(false);
    const [messageText, setMessageText] = useState('');

    // 当传递的 imageUrl 改变时设置预览
    useEffect(() => {
        if (imageUrl) {
            setPreview(imageUrl); // 更新预览为传入的 URL
        }
    }, [imageUrl]);

    // 处理文件选择事件
    const handleFileChange = (event) => {
        const selectedFile = event.target.files[0];
        if (selectedFile) {
            setFile(selectedFile); // 保存选择的文件
            setPreview(URL.createObjectURL(selectedFile)); // 设置文件的预览
            setProcessedImage(''); // 清空处理后的图像
            setMessageText(''); // 清空消息
        }
    };

    // 处理图像上传和处理
    const handleUpload = async () => {
        setLoading(true); // 开始加载状态
        const imageToProcess = file ? URL.createObjectURL(file) : preview; // 判断使用上传的文件还是预览的 URL

        try {
            const response = file ? new Blob([file], { type: file.type }) : await fetch(imageToProcess).then(r => r.blob());
            
            // 调用 removeBackground 函数处理图像
            const processedBlob = await removeBackground(response);
            const processedUrl = URL.createObjectURL(processedBlob); // 将处理后的 Blob 转换为 URL
            
            setProcessedImage(processedUrl);
            setMessageText('图像处理成功！');
        } catch (error) {
            console.error(error);
            setMessageText('处理图像时出错。');
        } finally {
            setLoading(false);
        }
    };

    const saveImage = () => {
        if (!processedImage) {
            alert("尚未处理图像！");
            return;
        }

        const link = document.createElement('a');
        link.href = processedImage; // 处理后的图像 URL
        link.download = 'processed-image.png'; // 下载的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

    return (
        <div className="kou_box">
            <h1>抠图</h1>
            {/* 文件选择输入框 */}
            <Upload
                customRequest={({ file, onSuccess }) => {
                    handleFileChange({ target: { files: [file] } });
                    onSuccess();
                }}
                showUploadList={false}
            >
                <Button icon={<UploadOutlined />}>选择文件</Button>
            </Upload>
            {/* 上传并处理图像的按钮 */}
            <Button type="primary" onClick={handleUpload} disabled={loading}>
                上传并处理文件
            </Button>
            {/* 显示 loading 效果 */}
            {loading && <Spin size="large" />}
            {/* 显示消息 */}
            {messageText && <div className="message">{messageText}</div>}
            {/* 显示选择的文件的预览图像 */}
            {preview && (
                <div className="preview">
                    <h2>原始图像</h2>
                    <img src={preview} alt="Preview" />
                </div>
            )}
            {/* 显示处理后的图像 */}
            {processedImage && (
                <div className="processed-preview">
                    <h2>处理后的图像</h2>
                    <img src={processedImage} alt="Processed Preview" />
                    <Button type="primary" onClick={saveImage}>保存</Button>
                </div>
            )}
        </div>
    );
}

export default Matting;